<template>
    <div class="production-plan">
      <el-button type="success" @click="addjihau" class="save-button">保存主表单和明细</el-button>
      <h3 class="title">专检申请</h3>
  
      <!-- 基本信息 -->
      <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="120px" class="form-container">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="任务号" style="margin-bottom: 20px;">
              <el-input v-model="formData.taskNumber" placeholder="自动生成"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务类型">
                    <el-select v-model="formData.taskType" placeholder="请选择任务类型">
                    <el-option label="专检" value="专检" />
                    <el-option label="待检" value="待检" />
                    <el-option label="已发送" value="已发送" />
                    <el-option label="已检验" value="已检验" />
                    <el-option label="放行" value="放行" />
                    <el-option label="让步接收" value="让步接收" />
                    <el-option label="作废" value="作废" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label="工段">
                    <el-select v-model="formData.workSection" placeholder="请选择工段">
                    <el-option label="糖化" value="糖化" />
                    <el-option label="质检" value="质检" />
                    <el-option label="包装" value="包装" />
                    <el-option label="过滤" value="过滤" />
                    <el-option label="酵母" value="酵母" />
                    <el-option label="发酵" value="发酵" />
                    <el-option label="能源" value="能源" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="产线">
                        <el-select v-model="formData.productionLine" placeholder="请选择产线">
                        <el-option label="A线" value="A线" />
                        <el-option label="B线" value="B线" />
                        <el-option label="C线" value="C线" />
                        <el-option label="D线" value="D线" />
                        <el-option label="E线" value="E线" />
                        </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="班组">
                        <el-select v-model="formData.team" placeholder="请选择班组">
                        <el-option label="1班" value="1班" />
                        <el-option label="2班" value="2班" />
                        <el-option label="3班" value="3班" />
                        <el-option label="4班" value="4班" />
                        <el-option label="5班" value="5班" />
                        </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="班次">
                        <el-select v-model="formData.shift" placeholder="请选择班次">
                        <el-option label="班次1组" value="班次1组" />
                        <el-option label="班次2组" value="班次2组" />
                        <el-option label="班次3组" value="班次3组" />
                        <el-option label="班次4组" value="班次4组" />
                        <el-option label="班次5组" value="班次5组" />
                        </el-select>
                </el-form-item>
            </el-col>
          <el-col :span="8">
            <el-form-item label="工单号" style="margin-bottom: 20px;">
              <el-input v-model="formData.workOrderNumber" placeholder="自动生成"  disabled />
            </el-form-item>
          </el-col>
          
          <el-col :span="8">
            <el-form-item label="产品编码" style="margin-bottom: 20px;">
              <el-input v-model="formData.productCode" placeholder="请输入产品编码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品名称" style="margin-bottom: 20px;">
              <el-input v-model="formData.productName" placeholder="请输入产品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批次号" style="margin-bottom: 20px;">
              <el-input v-model="formData.batchNumber" placeholder="请输入批次号"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量" style="margin-bottom: 20px;">
                <el-input-number v-model="formData.quantity" placeholder="请输入数量" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" style="margin-bottom: 20px;">
              <el-input v-model="formData.unit" placeholder="请输入单位" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采样点" style="margin-bottom: 20px;">
              <el-input v-model="formData.samplingPoint" placeholder="请输入采样点" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="控制批次号" style="margin-bottom: 20px;">
              <el-input v-model="formData.controlBatchNumber" placeholder="请输入控制批次号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="前酵罐号" style="margin-bottom: 20px;">
              <el-input v-model="formData.preFermentationTankNumber" placeholder="请输入前酵罐号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="后酵罐号" style="margin-bottom: 20px;">
              <el-input v-model="formData.postFermentationTankNumber" placeholder="请输入后酵罐号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="清酒罐号" style="margin-bottom: 20px;">
              <el-input v-model="formData.sakeTankNumber" placeholder="请输入清酒罐号" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="满罐时间" prop="fullTankTime" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.fullTankTime"
                type="date"
                required
                placeholder="请选择满罐时间"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useRouter, useRoute } from 'vue-router';
  import { Materialread, Materialwrite } from '@/axios/axiosHelper';
  import axios from 'axios';
  import { th } from 'element-plus/es/locales.mjs';
  
  const formRef = ref(null);
  const currentUser = ref("admin");
  const router = useRouter();
  const route = useRoute();
  
  // 主表单数据
  const formData = reactive({
        "id":  route.params.id,
        "taskNumber": "",
        "taskType": "",
        "workSection": "",
        "productionLine": "",
        "team": "",
        "shift": "",
        "workOrderNumber": "",
        "productCode": "",
        "productName": "",
        "batchNumber": "",
        "quantity": 0,
        "unit": "",
        "samplingPoint": "",
        "controlBatchNumber": "",
        "preFermentationTankNumber": "",
        "postFermentationTankNumber": "",
        "sakeTankNumber": "",
        "fullTankTime": "",
        "isDel": true
  });





const getProductionById = (id) => {
console.log('查看专检申请反填数据:', id);
axios.get('https://localhost:7238/api/ProductionTask/FTProductionTask', {
    params:{
      id: route.query.id
    }
  })
  .then(res=>{
    formData.id = res.data.data[0].id;
    formData.taskNumber = res.data.data[0].taskNumber;
    formData.taskType = res.data.data[0].taskType;
    formData.workSection = res.data.data[0].workSection;
    formData.productionLine = res.data.data[0].productionLine;
    formData.team = res.data.data[0].team;
    formData.shift = res.data.data[0].shift;
    formData.workOrderNumber = res.data.data[0].workOrderNumber;
    formData.productCode = res.data.data[0].productCode;
    formData.productName = res.data.data[0].productName;
    formData.quantity = res.data.data[0].quantity;
    formData.quantity = res.data.data[0].quantity;
    formData.unit = res.data.data[0].unit;
    formData.samplingPoint = res.data.data[0].samplingPoint;
    formData.controlBatchNumber = res.data.data[0].controlBatchNumber;
    formData.preFermentationTankNumber = res.data.data[0].preFermentationTankNumber;
    formData.postFermentationTankNumber = res.data.data[0].postFermentationTankNumber;
    formData.sakeTankNumber = res.data.data[0].sakeTankNumber;
    formData.fullTankTime = res.data.data[0].fullTankTime;
    formData.modelValue = res.data.data[0];
    console.log('专检申请反填数据:', res.data);
  })
};


// // 保存主表单
 const addjihau = () => {
    axios.post('https://localhost:7229/api/ProductionTask/UpdateProductionTask', formData)
    .then(response => {
     if (response.data.code === 200) {
       ElMessage.success('专检申请修改成功');
       console.log(response.data.data);
       router.push("/GetProductionTask");
    } else {
       ElMessage.error(`专检申请修改失败：${response.data.message}`);
    }
    })
};

onMounted(()=>{
  getProductionById();
})


 
 

    </script>
    
    <style scoped>
    .production-plan {
      padding: 30px;
      background-color: #f0f2f5;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      font-family: 'Arial', sans-serif;
    }
    
    .title {
      text-align: center;
      margin-bottom: 30px;
      color: #2c3e50;
      font-size: 24px;
      font-weight: 600;
    }
    
    .save-button {
      display: block;
      margin: 0 auto 30px;
      padding: 12px 24px;
      font-size: 16px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .form-container {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    
    .el-form-item__label {
      color: #34495e;
      font-size: 16px;
      font-weight: 500;
    }
    
    .el-input,
    .el-input-number,
    .el-date-picker {
      border-radius: 6px;
      border: 1px solid #ccc;
      padding: 10px;
      font-size: 14px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .el-input:focus,
    .el-input-number:focus,
    .el-date-picker:focus {
      border-color: #42b983;
      outline: none;
      box-shadow: 0 0 5px rgba(66, 185, 131, 0.2);
    }
    </style>